<template>
  <view>
    <view class="card-view" v-for="(item, index) in list" :key="index">
      <!-- 			<view class="title-view">
				<view class="left">
					<view class="title">订单编号 : {{item.orderNum}}</view>
				</view>
				<view 
					:class="item.status === '已拒绝' ? 'status-type2': 'status-type1'"
					class="status-text">
						{{item.status}}
					</view>
			</view> -->
      <view class="card-body order-card-body">
        <view class="info-row">
          <view class="title">订单编号</view>
          <view class="right value">
            {{ item.orderNum }}
          </view>
        </view>
        <view class="info-row">
          <view class="title">医院</view>
          <view class="right value">
            {{ item.hospitalName }}
          </view>
        </view>
        <view class="info-row">
          <view class="title">服务项目</view>
          <view class="right value">
            {{ item.itemInfos.map((e) => e.serviceItem).join("/") }}
          </view>
        </view>
        <view class="info-row">
          <view class="title">护士</view>
          <view class="right value">{{ item.dispatchNurses }}</view>
        </view>
        <view class="info-row">
          <view class="title">就诊人</view>
          <view class="right value">{{ item.visitor }}</view>
        </view>
        <view class="info-row">
          <view class="title">预约时间</view>
          <view class="right value">{{ item.orderTime }}</view>
        </view>
        <!-- 				<view class="info-row">
					<view class="title">联系方式</view>
					<view class="right phone"></view>
				</view> -->
        <!-- 				<view class="info-row">
					<view class="title">订单金额</view>
					<view class="right money">¥{{item.orderAmount}}</view>
				</view> -->
        <!-- 				<view class="op-btn-row">
					<view class="btn-type1" v-if="['待评估','待派发'].includes(item.status)">拒绝</view>
					<view class="btn-type2" v-if="item.status === '待评估'">评估</view>
					<view class="btn-type2" v-if="item.status === '待出发'">派发</view>
					<view class="btn-type3" v-if="item.status === '已拒绝'">已拒绝</view>
				</view> -->
      </view>
    </view>

    <uni-load-more :status="status"></uni-load-more>
  </view>
</template>

<script>
import PageInfo from "../../utils/pageutils";
import * as orderInfo from "../../common/api/orderInfo.js";
export default {
  data() {
    return {
      form: {
        visitorIdNum: "",
      },
      pageInfo: new PageInfo(),
      list: [],
      status: "more",
    };
  },
  onLoad(opt) {
    if (opt.visitorIdNum) {
      this.form.visitorIdNum = opt.visitorIdNum;
    }
  },
  onPullDownRefresh() {
    this.refresh();
  },
  onReachBottom() {
    this.loadMore();
  },
  onShow() {},
  mounted() {
    this.refresh();
  },
  methods: {
    refresh() {
      this.pageInfo.reset();
      this.list = [];
      this.status = "loading";
      this.getList();
    },
    loadMore() {
      if (this.pageInfo.isNotLoadAll) {
        this.status = "loading";
        this.pageInfo.nextPage();
        this.getList();
      } else {
        this.status = "noMore";
      }
    },
    getList() {
      const dataJson = uni.getStorageSync("user_info") || "{}";
      const data = JSON.parse(dataJson) || {};
      const param = {
        pageIndex: this.pageInfo.pageIndex,
        pageSize: this.pageInfo.pageSize,
        hospitalUid: data.hospitalUid,
        statusList: ["已完成"],
        ...this.form,
      };
      orderInfo
        .queryByPage(param)
        .then((result) => {
          const list = result.data.data.rows || [];
          const total = result.data.data.total;
          this.list = [...this.list, ...list];
          this.pageInfo.total = total;
          this.pageInfo.loadedTotal = this.list.length;
          setTimeout(() => {
            if (this.pageInfo.isNotLoadAll) {
              this.status = "more";
            } else {
              this.status = "noMore";
            }
            uni.stopPullDownRefresh();
          }, 200);
        })
        .catch((error) => {
          console.log(error);
        });
    },
  },
};
</script>

<style lang="scss" scoped>
.container {
  display: flex;
  flex-direction: column;
}
.tab-view {
  margin-left: 20rpx;
  margin-right: 20rpx;
  .grid-item {
    width: 100%;
    height: 100%;
    padding: 10rpx;
    box-sizing: border-box;
    .grid-item-inner {
      width: 100%;
      height: 66rpx;
      background: white;
      border-radius: 33rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 26rpx;
      color: rgba(35, 35, 35, 0.8);
      background: rgba(255, 255, 255, 0.5);
    }
    .grid-item-inner-selected {
      background: white;
      color: #2eb0d9;
    }
  }
}

.card-view {
  margin-left: 30rpx;
  margin-right: 30rpx;
  background: white;
  border-radius: 24rpx;
  padding: 30rpx;
  box-sizing: border-box;
  margin-top: 24rpx;
  .title-view {
    display: flex;
    align-items: center;
    .left {
      flex: 1;
      display: flex;
      align-items: center;
      .title {
        font-size: 28rpx;
        color: #000;
        font-weight: bold;
      }
    }
    .status-text {
      font-size: 30rpx;
    }
    .status-type1 {
      color: #f5803d;
    }
    .status-type2 {
      color: rgba(35, 35, 35, 0.4);
    }
  }
  .card-body {
  }
}

.order-card-body {
  display: flex;
  flex-direction: column;
  margin-top: 10rpx;
  .info-row {
    display: flex;
    min-height: 60rpx;
    align-items: center;
    justify-content: center;
    .title {
      width: 150rpx;
      color: rgba(35, 35, 35, 0.7);
      font-size: 26rpx;
    }
    .right {
      flex: 1;
    }
    .value {
      font-size: 26rpx;
      color: #232323;
    }
    .phone {
      color: #2eb0d9;
      font-size: 30rpx;
    }
    .money {
      color: #ee5a2c;
      font-size: 30rpx;
      font-weight: bold;
    }
  }

  .op-btn-row {
    display: flex;
    min-height: 60rpx;
    margin-top: 10rpx;
    align-items: center;
    justify-content: flex-end;
    font-size: 26rpx;
    .btn-type1 {
      width: 150rpx;
      height: 60rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      border: solid 1rpx #2eb0d9;
      color: #2eb0d9;
      border-radius: 60rpx;
      margin-left: 10rpx;
    }
    .btn-type2 {
      width: 150rpx;
      height: 60rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      background: #2eb0d9;
      color: white;
      border-radius: 60rpx;
      margin-left: 10rpx;
    }
    .btn-type3 {
      width: 150rpx;
      height: 60rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      background: #f0f0f0;
      color: #c5c5c5;
      border-radius: 60rpx;
      margin-left: 10rpx;
    }
  }
}
</style>
